<template>
  <div
    ref="rootRef"
    class="suggest"
    v-loading:[loadingText]="loading"
    v-no-result="noResult"
  >
    <ul class="suggest-list">
      <!-- <li class="suggest-item" v-if="singer" @click="selectSinger(singer)">
        <div class="icon">
          <i class="icon-mine"></i>
        </div>
        <div class="name">
          <p class="text">{{ singer.name }}</p>
        </div>
      </li> -->
      <li
        class="suggest-item"
        v-for="song in songs"
        :key="song.id"
        @click="selectSong(song)"
      >
        <div class="icon">
          <i class="icon-music"></i>
        </div>
        <div class="name">
          <p class="text">{{ song.singer }}-{{ song.name }}</p>
        </div>
      </li>
      <div class="suggest-item" v-loading:[loadingText]="pullupLoading"></div>
    </ul>
  </div>
</template>

<script>
import { computed, nextTick, ref, watch } from "vue";
import { searchMusics } from "@/api/index";
import usePullUp from "./use-pull-up-load";
export default {
  name: "suggest",
  props: {
    query: String,
    showSinger: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["select-song", "select-singer"],
  setup(props, { emit }) {
    const singer = ref(null);
    const songs = ref([]);
    const hasMore = ref(true);
    const page = ref(1);
    const loadingText = ref("");
    const manualLoading = ref(false);

    const loading = computed(() => {
      return !songs.value.length;
    });
    const noResult = computed(() => {
      return !songs.value.length && !hasMore.value;
    });
    const pullupLoading = computed(() => {
      return isPullLoad.value && hasMore.value;
    });
    const preventPullUpload = computed(() => {
      return loading.value || manualLoading.value;
    });
    const { scroll, rootRef, isPullLoad } = usePullUp(
      searchMore,
      preventPullUpload
    );
    watch(
      () => props.query,
      async (newQuery) => {
        if (!newQuery) {
          return;
        }
        //搜索
        await searchFirst();
      }
    );
    //搜索逻辑
    async function searchFirst() {
      // if (!props.value) {
      //   return;
      // }
      page.value = 1;
      songs.value = [];
      singer.value = null;
      hasMore.value = true;
      let midsong;
      const {
        data: { result: songResult },
      } = (midsong = await searchMusics(
        props.query,
        page.value,
        props.showSinger
      ));
      console.log(midsong, "123");
      songs.value = getSongs(songResult.songs) || [];
      singer.value = props.query;
      hasMore.value = !songResult.hasMore ? false : songResult.hasMore;
      await nextTick();
      await makeItScrollable();
    }
    //获取更多歌曲
    async function searchMore() {
      if (!hasMore.value) {
        return;
      }
      page.value++;
      // const {
      //   data: { result: songResult },
      // }
      const res = await searchMusics(props.query, page.value, props.showSinger);
      console.log(res);
      songs.value = songs.value.concat(getSongs(songResult.songs) || []);
      hasMore.value = !songResult.hasMore ? false : songResult.hasMore;
      await nextTick();
      await makeItScrollable();
    }
    //获取歌曲
    function getSongs(songs) {
      if (!Array.isArray(songs) || !songs.length) {
        return;
      }
      let singerObj = null;
      singerObj = songs.map((item) => {
        return {
          id: item.id,
          name: item.name,
          singer: getSingerName(item.ar),
          duration: item.dt,
          album: item.al.name,
          pic: item.al.picUrl,
          url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
        };
      });
      return singerObj;
    }
    //获取歌手名字
    function getSingerName(artists) {
      let str = "";
      const length = artists.length;
      artists.forEach((item, index) => {
        if (index == length - 1) {
          str += item.name;
        } else {
          str += item.name + "/";
        }
      });
      return str;
    }
    //不满一屏继续请求
    async function makeItScrollable() {
      if (scroll.value.maxScrollY >= -1) {
        manualLoading.value = true;
        await searchMore();
        manualLoading.value = false;
      }
    }
    //点击歌曲事件
    function selectSong(song) {
      console.log(song);
      emit("select-song", song);
    }
    //点击歌手事件
    function selectSinger(singer) {
      console.log(singer, "suggest");
      emit("select-singer", singer);
    }
    return {
      singer,
      songs,
      loadingText,
      noResult,
      loading,
      hasMore,
      pullupLoading,
      page,
      //pullup
      scroll,
      rootRef,
      isPullLoad,

      selectSong,
      selectSinger,
    };
  },
};
</script>

<style lang="scss" scoped>
.suggest {
  height: 100%;
  overflow: hidden;
  .suggest-list {
    padding: 0 30px;
    .suggest-item {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      .icon {
        flex: 0 0 30px;
        width: 30px;
        [class^="icon-"] {
          font-size: 14px;
          color: $color-text-d;
        }
      }
      .name {
        flex: 1;
        font-size: $font-size-medium;
        color: $color-text-d;
        overflow: hidden;
        .text {
          @include no-wrap();
        }
      }
    }
  }
}
</style>
